<template>
  <div class="main-layout">
    <Navbar />
    <RouterView #="{ Component }">
      <Transition
        name="fade"
        mode="out-in"
        enter-active-class="transition duration-300 ease-in"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition duration-500 ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <KeepAlive>
          <component :is="Component" />
        </KeepAlive>
      </Transition>
    </RouterView>
    <Footer />
  </div>
</template>
<script setup lang="ts"></script>
<style>
/* .fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
} */
</style>
